<template>
	<jk-view :loading="showLoading">
		<jk-operation-card v-show="createMethod === 'page'" class="fixed-operation-bar margin-bottom-10 margin-top-10">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code || '系统自动生成' }}</span>
					<el-tag size="mini" type="info" class="margin-left-10">
						<jk-state-bar :state="ruleForm.serviceState" :state-list="foreSpinPlanStateList"></jk-state-bar>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<div><el-button type="primary" :disabled="!ruleForm.id" icon="el-icon-printer" size="small" class="item-gap" @click="onPrintBtn">打印</el-button></div>
					<div v-if="ruleForm.id && ruleForm.productOrderCode" class="item-gap"><el-button type="primary" plain icon="el-icon-top-left" size="small" @click="onJumpOrder">前往订单</el-button></div>
					<el-popconfirm
						title="注：内容如有修改，请先保存后再取消下达!"
						confirm-button-text="已保存，确定取消下达"
						@confirm="onUnReleaseBtn"
					>
						<jk-button v-show="pageType !== 'detail' && ruleForm.serviceState === 1" slot="reference" :loading="unReleaseBtnLoading" :disabled="ruleForm.serviceState !== 1" class="item-gap" icon="el-icon-circle-close" type="warning">取消下达</jk-button>
					</el-popconfirm>
					<el-popconfirm
						title="注：内容如有修改，请先保存后再下达!"
						confirm-button-text="已保存，确定下达"
						@confirm="onReleaseBtn"
					>
						<jk-button v-show="pageType !== 'detail' && ruleForm.id && ruleForm.serviceState === 0" slot="reference" :loading="releaseBtnLoading" :disabled="ruleForm.serviceState !== 0" class="item-gap" icon="el-icon-document-checked" type="primary">下达</jk-button>
					</el-popconfirm>
					<jk-button v-if="pageType !== 'detail'" class="" icon="el-icon-finished" :loading="saveBtnLoading" type="primary" @click="onConfirmBtn(0)">保存</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card>
			<div :style="{ height: createMethod === 'page' ? 'auto' : `${height}px`, overflowX: 'hidden', overflowY: 'auto' }">
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="100px" :show-message="false">
					<div class="margin-bottom-4 flex-between-center">
						<el-tag type="primary" effect="plain" class="">
							<span class="el-icon-tickets item-gap"></span>
							<span>基本信息</span>
						</el-tag>
						<notice-popover-bar ref="noticePopoverBar" :rule-form="ruleForm"></notice-popover-bar>
					</div>
					<jk-card class="margin-bottom-10">
						<el-row>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="生产区域" prop="workshopId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.workshopName }}</span>
									<el-select v-else v-model="ruleForm.workshopId" placeholder="生产区域" clearable class="width-100-percent">
										<el-option v-for="item in workshopList" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="生产订单">
									<span v-if="ruleForm.id || pageType === 'detail'" class="read-only-2">{{ ruleForm.productOrderCode }}</span>
									<remote-search-order-input
										v-else
										placeholder="生产订单"
										only-key="productOrderId"
										query-name="productOrderCode"
										:form-data="ruleForm"
										@on-select="onSelectOrderChange"
									></remote-search-order-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="品种" prop="productId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productName }}</span>
									<remote-search-product-input
										v-else
										placeholder="品种"
										:disabled="!!ruleForm.productOrderId"
										default-stock-type="CS"
										only-key="productId"
										query-name="productName"
										:form-data="ruleForm"
										@on-select="onSelectProductChange"
									></remote-search-product-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="批号">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.batchCode }}</span>
									<remote-search-batch-code-input
										v-else
										:disabled="!ruleForm.productId || !!ruleForm.productOrderId"
										placeholder="批号"
										only-key="batchCodeId"
										query-name="batchCode"
										:form-data="ruleForm"
										@on-select="onSelectBatchCodeChange"
									></remote-search-batch-code-input>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="产线" prop="ppfProductionLineId">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.ppfProductionLineName }}</span>
									<jk-select v-else v-model="ruleForm.ppfProductionLineId" size="medium" class="width-100-percent" placeholder="产线" :clearable="true" :option-list="productionLineList" @change="onLineChange"></jk-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="单据日期" prop="belongDate">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.belongDate }}</span>
									<el-date-picker v-else v-model="ruleForm.belongDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="单据日期" />
								</el-form-item>
							</el-col>
							<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
                                <el-form-item class="margin-bottom-10" label="配棉方案" prop="ppfCottonBlendingId">
                                    <span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.ppfCottonBlendingCode }}</span>
                                    <remote-search-prd-cotton-input
                                        v-else
                                        size="medium"
                                        placeholder="配棉方案"
                                        only-key="ppfCottonBlendingId"
                                        query-name="ppfCottonBlendingCode"
                                        :form-data="ruleForm"
                                        @on-select="onSelectPrdCottonChange"
                                    ></remote-search-prd-cotton-input>
                                </el-form-item>
                            </el-col>-->
							<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
                                <el-form-item class="margin-bottom-10" label="投料数量" prop="feedstockQty">
                                    <jk-number-input v-model="ruleForm.feedstockQty"></jk-number-input>
                                </el-form-item>
                            </el-col>-->
							<el-col :xl="12" :lg="16" :md="24" :sm="24" :xs="24">
								<el-form-item class="margin-bottom-0" label="备注">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.remark }}</span>
									<el-input v-else v-model="ruleForm.remark" type="textarea" :rows="1" placeholder="" />
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
					<div class="flex-between-center margin-bottom-4">
						<div class="flex-start-center">
							<el-tag type="primary" effect="plain" class="margin-right-10">
								<span class="el-icon-box item-gap"></span>
								<span>工序排产</span>
							</el-tag>
							<div class="flex-start-center">
								<!--<jk-state-bar v-for="(item, index) in openStateList" :key="index" style="margin-right: 10px;" :state="item.id" :state-list="openStateList"></jk-state-bar>-->
							</div>
						</div>
						<!--<el-checkbox-group v-model="checkProcessVal" size="small" @change="onCheckProcessChange">
                            <el-checkbox-button v-for="(item, index) in processList" :key="index" :label="item.id">{{ item.name }}</el-checkbox-button>
                        </el-checkbox-group>-->
					</div>
				</el-form>
				<!--排产工序-->
				<process-info-item
					:process-schedule-list.sync="ruleForm.processPlanLineList"
					:page-type="pageType"
				></process-info-item>
			</div>
		</jk-card>
	</jk-view>
</template>

<script>
    import orderFormMixin from './form-mixin';
    import { formatDate } from '../../../../../../utils/jk/jk-tool';
    export default {
        name: 'FormBox',
        mixins: [orderFormMixin],
        props: {
        },
        data() {
            return {
            };
        },
        methods: {
        },
        mounted() {
        },
        watch: {
        }
    };
</script>

